<template>
	<div class="gk-layout-container">
		<div class="gk-layout-header">
			<!--工具栏-->
			<div class="toolbar" style="float:left;">
				<el-form :inline="true" :model="filters" :size="global.gSize">
					<el-form-item>
						<el-input v-model.trim="filters.locId" placeholder="请输入货位"></el-input>
					</el-form-item>
					<el-form-item>
						<el-select v-model="filters.rareaId"
							:placeholder="$t('field.Core.corewhloc.Please enter the areaName')" auto-complete="off"
							style="width: 100%;" clearable filterable >
							<el-option v-for="item in Items" :key="item.Id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-select v-model="filters.stockStatus"
							placeholder="托盘状态" auto-complete="off"
							style="width: 100%;" clearable filterable >
							<el-option v-for="item in dicts.stockStatus" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<kt-button :label="$t('action.search')" perms="core:coreStock:view" type="primary"
							@click="findPage(null)" />
					</el-form-item>
				</el-form>
			</div>
			<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
				<el-form :inline="true" :size="global.gSize">
					<el-form-item>
						<el-button-group>
							<el-tooltip content="导出Excel" placement="top">
								<el-button icon="fa fa-file-excel-o" @click="exportExcel" />
							</el-tooltip>
						</el-button-group>
					</el-form-item>
				</el-form>
			</div>
		</div>
	



     <div class="gk-layout-main">
	   <my-table :data="pageResult.content"  :loading="loading" >
          <el-table-column :label="$t('action.desc')" width="50" fixed="left"  header-align="center" align="center">
            <template slot-scope="scope">   {{scope.$index+1}}   </template>
          </el-table-column> 
          <Column  width="300"  prop="dItemId" label="物料名称"     :formatter="itemFilter" />
          <Column  prop="dCount" label="数量"   />
		  <Column  prop="locId" label="库位"    />
          <Column  prop="status" label="状态"     :formatter= "selectionFormat" />
          <Column  prop="createTime" label="创建时间"     :formatter= "dateFormat" /> 
          <el-table-column    :label="$t('action.operation')" width="120">
              <template slot-scope="scope">
                  <kt-button icon="fa fa-edit"  type="text"   :label="$t('action.showDetail')"  perms="core:coreStock:showDetail"    @click="handleShowDetail(scope.$index, scope.row)" />
				  <kt-button icon="fa fa-edit"  type="text"   label="出库" v-if="scope.row.status==9"  perms="core:coreStock:out"     @click="handleOut(scope.$index, scope.row)" />
              </template>
          </el-table-column>
      </my-table>
  </div>
  <!--分页栏-->
  <div class="toolbar gk-layout-footer"  style="padding:10px;">
    
    <el-pagination layout="total, prev, pager, next, jumper"  @current-change="findPage"
                   :current-page="pageRequest.pageNum"
                   :page-size="pageRequest.pageSize"
                   :total="pageResult.totalSize"
                   style="float:right;">
    </el-pagination>
  </div>



		<!--新增编辑界面-->
		<el-dialog :title="'库位库存信息'" width="70%" height="700" :visible.sync="editDialogVisible" :close-on-click-modal="false">
			<el-form :model="dataForm" label-width="80px" ref="dataForm" :size=global.gSize label-position="right">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-form-item label="状态" prop="status">
							<el-select v-model="dataForm.status" style="width: 100%;" :disabled="true">
								<el-option v-for="item in dicts.stockStatus" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="是否锁定" prop="locked">
							<el-select v-model="dataForm.locked" style="width: 100%;" :disabled="true">
								<el-option v-for="item in dicts.isLocked" :key="item.value" :label="item.label"
									:value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>


			<div class="gk-layout-main" style="height:450px">
				<el-table :data="pageResultDetail.content"  class='gk-main-table'  :loading="loading"  size="mini"  align="left"   style="width:100%;" >
					<el-table-column :label="$t('action.desc')" width="50" fixed="left"  header-align="center" align="center">
						<template slot-scope="scope">   {{scope.$index+1}}   </template>
					</el-table-column> 
					<Column  prop="itemId" label="物料名称"   :formatter= "itemFilter" />
			
					<Column   prop="barCode" label="条码"    />
					<Column   prop="storeStatus" label="状态"    :formatter= "selectionFormat" />
					<Column   prop="bPos" label="顺序"   />
					<Column  prop="inTime" label="入库时间"     :formatter= "dateFormatDay" />
					<el-table-column    :label="$t('action.operation')" width="80">
						<template slot-scope="scope">
							<kt-button icon="fa fa-arrow-circle-up"  label=" "  perms="core:coreStock:showDetail"   v-if="scope.$index!=0"  @click="handleChangePos(scope.store,scope.row,-1)" />
							<kt-button icon="fa fa-arrow-circle-down" label=" "   perms="core:coreStock:showDetail"   
							v-if="scope.$index!=pageResultDetail.content.length-1"   @click="handleChangePos(scope.store,scope.row,1)" />
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>

<script>

	import KtButton from "@/views/Core/KtButton"
	import { format } from "@/utils/datetime"
	import { formatDay } from "@/utils/datetime"
	import Column from "@/views/Core/Column"
	import MyTable from "@/views/Core/MyTable"
  import { myXlsExport } from "@/excel/myXls"
  import {  getItemName} from "@/utils/myUtil"
	import XLSX from "xlsx";
	export default {
		components: {
			KtButton,
			Column,
			MyTable
		},
		data() {
			return {
				size: 'small',
				filters: {
					label: ''
				},
				loading:false,
				Items: [],
				
				detailColumns: [

					

				],
				pageRequest: { pageNum: 1, pageSize: 20 },
				pageResult: {},
				pageResultDetail: {},
				dicts: this.$store.state.dict.dicts,
				editDialogVisible: false, // 新增编辑界面是否显示
				editLoading: false,
				whLocs: [],
				areaTypes: [],
				// 新增编辑界面数据
				dataForm: {
					id: null,
					whId: null,
					classifyId: null,
					pileType: null,
					rareaId: null,
					locId: null,
					locIndex: null,
					boxCode: null,
					status: null,
					infocount: null,
					locked: null,
					createTime: null,
					sameCode: null,
					changeTime: null,
					occupancy: null,
					pkStatus: null,
				}
			}
		},
		methods: {
			// 获取分页数据
			findPage: function (data) {
				data=data||1;
				
					this.filters.pageNum = data
					this.pageRequest.pageNum =data
				
				this.filters.pageSize = this.pageRequest.pageSize
				this.filters.playType = 2
				this.$api.coreStock.findPage(this.filters).then((res) => {
					this.pageResult = res.data
				}).then(data != null ? data.callback : '')
			},
			// 获取明细数据
			findDetailPage: function (data) {
				this.$api.coreStock.GetListByStockId(data).then((res) => {
					this.pageResultDetail = { content: res.data }
				}).then(data != null ? data.callback : '')
			},
			// 显示详情界面
			handleShowDetail: function (params,row) {
				this.editDialogVisible = true
				this.dataForm = Object.assign({}, row)
				this.findDetailPage(row);
			},

			handleChangePos: function (scope,row,direct) {
		
				row.dir=direct
				this.$api.coreStock.changeDetailPos(row).then((res) => {
									this.findDetailPage(this.dataForm)
				}).then(data != null ? data.callback : '')
			},
			//出库生成任务
			handleOut: function (params,r) {
				this.$api.coreStock.DirectOutTask(r).then((res) => {
					if (res.code == 200) {
						this.$message({ message: '操作成功', type: 'success' })
						this.findPage(null)   //这里有bug
					} else {
						this.$message({ message: res.msg, type: 'error' })
					}
				})
			},
			//导出的方法
			exportExcel() {
				this.filters.pageSize = -1
		 
					this.$api.coreStock.findPage(this.filters).then((res) => {
				 
						const tHeader = ['库位', '托盘条码']; 
						const filterVal = ['locId', 'name']; 
					   myXlsExport(tHeader, filterVal ,res.data.content, '库位库存导出');
					 
					})
			 
			},
		 
			// 时间格式化
			dateFormat: function (row, column, cellValue, index) {
				return format(row[column.property])
			},
			// 时间格式化
			dateFormatDay: function (row, column, cellValue, index) {
				return formatDay(row[column.property])
			},
			//获取库房名称
			findWhloc: function () {
				this.$api.corewhloc.findPage().then((res) => {
					this.whLocs = res.data.content
				})
			},
			//加载物料
			findItems: function () {
				this.$api.item.findAll().then((res) => {
					this.Items = res.data
				})
			},
			findAreaTypes: function () {
				this.$api.corewharea.findPage().then((res) => {
					this.areaTypes = res.data.content
				})
			},


			itemFilter: function (row, column, cellValue, index) {
				return getItemName(cellValue,this.Items)
			},
			areaFormat: function (row, column, cellValue, index) {
				let key = ""
				let propt = column.property;
				let val = row[column.property];
				let dict = this.areaTypes;
				for (let i = 0; i < dict.length; i++) {

					if (dict[i].id == val) {
						return dict[i].areaName;
					}
				}
				return row[column.property]
			},
			selectionFormat: function (row, column, cellValue, index) {
				let key = ""
				let propt = column.property;
				if (propt == "status" ) {
					key = "stockStatus"
				}
				else if (propt == "storeStatus") {
					key = "storeStatus"
				}else if (propt == "locked") {
					key = "isLocked"
				}
				let val = row[column.property];
				let dict = this.$store.state.dict.dicts[key];
				if (dict == undefined) {
					return row[column.property]
				}
				for (let i = 0; i < dict.length; i++) {
					if (dict[i].value == val) {
						return dict[i].label;
					}
				}
				return row[column.property]
			}
		},
		mounted() {
			this.findWhloc();
			this.findAreaTypes();
			this.findItems()
			this.findPage(null)
		}
	}
</script>

<style scoped>

</style>